<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
    <el-card>
      <span style="font-size: 13px">项目编号：</span>
      <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

      <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
      <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


      <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
      <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择">
        <el-option label="货物类" value="1"></el-option>
        <el-option label="服务类" value="2"></el-option>
        <el-option label="工程类" value="3"></el-option>
      </el-select>

      <div style="display: inline;margin-left: 10%">
        <el-button size="mini" @click="searchCondition" type="primary">查询</el-button>
        <el-button size="mini" @click="clearMes">清空查询</el-button>
      </div>
    </el-card>
    <div style="margin-top: 10px;margin-bottom: 10px">
      <el-table
          :data="projectTable"
          border
          v-loading="loading"
          style="width: 100%">
        <el-table-column
            prop="projectCode"
            min-width="170px"
            label="项目编号"
        >
        </el-table-column>
        <el-table-column
            prop="projectName"
            min-width="150px"
            label="项目名称"
        >
        </el-table-column>
        <el-table-column
            prop="categoryName"
            min-width="130px"
            label="采购类别"
        >
        </el-table-column>
        <el-table-column
            prop="purchaseMethod"
            min-width="110px"
            label="采购方式">
        </el-table-column>
        <el-table-column
            prop="budget"
            min-width="110px"
            label="预算金额(元)">
        </el-table-column>
        <el-table-column
            prop="state"
            min-width="130px"
            label="成交供应商审批状态">
        </el-table-column>
        <el-table-column
            prop="supplyerApproveTime"
            min-width="170px"
            label="审批通过时间">
        </el-table-column>
        <el-table-column
            prop="createTime"
            min-width="170px"
            label="创建时间">
        </el-table-column>

        <el-table-column
            width="120px"
            label="操作"
        >
          <template slot-scope="{$index, row}">
           <span
               :style="{
            textAlign: 'center',
            marginLeft: '7px',
            color: row.state === '已提交(审批通过)' ? '#409eff' : 'gray'
          }"
               @click="projectManage(row)"
           >
           成交合同管理
          </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="theData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="成交合同管理"
        :visible.sync="centerDialogVisible"
        width="75%"
        center
        :show-close="false"
    >

      <conclude-contract-manage :projectInfo="projectInfo" :contracts="contracts" :contractsStamped="contractsStamped":supplierPrice="supplierPrice":resultReport="resultReport" />
      <div slot="footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import ConcludeContractManage from "@/components/concludeContractManage/index.vue"
import {getAllProject, getContracts, getContractsStamped,getSupplierPrice,searchProject,getResultReport} from "@/api/concludeContract";
import {reqGetAllItems} from "@/api/purchaseItemManage";

export default {
  name: "concludeContract",
  data() {
    return {
      // 搜索项目信息
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
      },
      theData:{
        page: 1,
        pageSize: 20,
      },
      projectTable: [],
      loading: true, // 修改是否显示加载页面
      currentPage: 1,
      total: 0,
      pageSize: 20,
      centerDialogVisible: false,

      // 将项目相关信息传到组件
      projectInfo:{
        projectId:"",
        projectCode:"",
        projectName: "",
        categoryName: "",
        budget:"",
        contractApproveStatus:"",
        contractSubmitStatus:"",
        archiveSubmitStatus:"",
        // resultRport:"",
        // supplyerApproveStatus:"",
        // supplyerSubmitStatus:"",
      },

      contracts: [], //成交合同的数据
      contractsStamped: [], // 获得盖章后成交合同的数据
      supplierPrice: [], // 获得供应商报价表的相关数据
      pageflag:false,//判断页面
      resultReport:"", //获得成交合同报表信息
    }
  },
  mounted() {
    this.searchCondition();
  },
  methods: {
    // //获取所有项目
    // async getAllproject(){
    //   let res =await getAllProject()
    //   console.log(res)
    //   if (res){
    //     this.loading = false
    //   }
    //   if (res.data.code === 200){
    //     this.projectTable = res.data.data.projectVos;
    //     // console.log("table"+this.projectTable.supplyerApproveStatus)
    //     this.total = res.data.data.total
    //
    //   }else {
    //     this.projectTable = [];
    //     this.total = 0;
    //     this.$message(res.data.msg);
    //   }
    // },
    closeDialog() {
      this.centerDialogVisible = false;
      // 触发刷新页面的逻辑
      this.searchCondition();
    },
    clearMes() {
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.searchCondition();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.pageflag = true;
      this.searchCondition()
    },

    // 搜索成交合同
    async searchCondition(){
      let theDates = {
        page: this.currentPage,
        pageSize: this.pageSize,
        projectCode: this.projectSearch.projectCode,
        projectName: this.projectSearch.projectName || '',
        purchaseCategoryId: this.projectSearch.purchaseCategoryId
      }
      if(!this.pageflag){
        this.currentPage = 1;
      }
      let pageInfo = this.currentPage + "/" + this.theData.pageSize
      let res = await searchProject(pageInfo,theDates)
      // let res = await getAllProject(theDate)
      if (res){
        this.loading = false
      }
      if (res.data.code === 200){
        this.projectTable = res.data.data.projectVos;
        console.log("table"+this.projectTable.state)
        this.total = res.data.data.total

      }else {
        this.projectTable = [];
        this.total = 0;
        this.$message(res.data.msg);
      }
      this.pageflag = false
    },

    // 向子项目赋值
    async projectManage(row) {
      console.log("ssssssssssssssss"+row.supplyerApproveStatus)
      if (row.state === "已提交(审批通过)") {
        // console.log("iiiiiiiidddddddddd"+row.contractSubmitStatus)
        this.projectInfo.projectId = row.projectId;
        this.projectInfo.projectCode = row.projectCode;
        this.projectInfo.projectName = row.projectName;
        this.projectInfo.categoryName = row.categoryName;
        this.projectInfo.budget = row.budget;
        this.projectInfo.contractApproveStatus = row.contractApproveStatus;
        this.projectInfo.contractSubmitStatus = row.contractSubmitStatus;
        this.projectInfo.archiveSubmitStatus = row.archiveSubmitStatus;
        // this.projectInfo.resultRport = row.resultRport;
        this.centerDialogVisible = true;
        this.contracts = [];
        this.contractsStamped = [];
        this.supplierPrice = [];
        this.resultReport = "";
        // 获得成交合同表的相关信息
        let res = await getContracts(row.projectId)
        if (res.data.code === 200) {
          this.contracts = res.data.data;
        } else {
          this.$message.error(res.data.msg)
        }
        // 获得盖章后的成交合同表的相关信息
        let resTag = await getContractsStamped(row.projectId)
        if (resTag.data.code === 200) {
          this.contractsStamped = resTag.data.data;
        } else {
          this.$message.error(resTag.data.msg)
        }

        // 获得供应商报价表的相关信息
        let resPrise = await getSupplierPrice(row.projectId)
        if (resPrise.data.code === 200) {
          this.supplierPrice = resPrise.data.data;
        } else {
          this.$message.error(resPrise.data.msg)
        }


        // 获得合同报表的相关信息
        let resResult = await getResultReport(row.projectId)
        if (resResult.data.code === 200) {
          this.resultReport = resResult.data.data;
          console.log(this.resultReport)
        } else {
          this.$message.error(resResult.data.msg)
        }
      }
      else {
        alert("成交供应商审批未通过")
      }
    },

  },
  components: {
    ConcludeContractManage,
  },
}
</script>

<style scoped>

</style>
